今天要練習使用form標籤做輸入框，讓輸入的文字能夠先印再console視窗，之後還能再不同網頁傳輸。
<form> 是HTML中的標籤，用於創建網頁中的表單。它允許使用者輸入資訊，並將該資訊提交至指定的伺服器或處理程式。

首先我們使用 usestate來設定title,body,author的初始狀態(空字串)，set狀態代表有輸入東西時去抓取文字。

  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');
  const [author, setAuthor] = useState('mario');

接著要製作輸入框，把新文字放到變數上去，<textarea> 是一個多行文本區域，required 表示這個區域是必填的，value={body} 將輸入值綁定到名為 body 的狀態上，onChange 事件處理函數用於更新 body 狀態。

  <form onSubmit={handleSubmit}>
        <label>Blog title:</label>
        <input 
          type="text" 
          required 
          value={title}
          onChange={(e) => setTitle(e.target.value)}
        />
        <label>Blog body:</label>
        <textarea
          required
          value={body}
          onChange={(e) => setBody(e.target.value)}
        ></textarea>
        <label>Blog author:</label>
        <select
          value={author}
          onChange={(e) => setAuthor(e.target.value)}
        >
          <option value="mario">mario</option>
          <option value="yoshi">yoshi</option>
        </select>
        <button>Add Blog</button>
      </form>

整串輸入框被包在form裡，，所以按下Add blogbutton會提交出去，並清空輸入框。

我們設定自製的handlesubmit為表單的提交事件處理程序，前往handlesubmit並放入title body author在blog裡印出在console視窗，且不清空輸入框

  const handleSubmit = (e) => {
    e.preventDefault();
    const blog = { title, body, author };

    console.log(blog);
  }

參考資料

Net ninja